<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html,charset=UTF-8">
    <title>白起社区</title>
    <head th:insert="import :: head"></head>
    <!--    <link rel="stylesheet" href="/css/bootstrap.min.css">-->
    <!--    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">-->
    <!--    <link rel="stylesheet" href="/css/community.css">-->
    <!--    <link rel="stylesheet" href="/css/sweetalert.min.css">-->
    <!--    <script src="/js/jquery-3.6.4.min.js"></script>-->
    <!--    <script src="/js/bootstrap.min.js"></script>-->
    <!--    <script src="/js/community.js"></script>-->
    <!--    <script src="/js/moment.js"></script>-->
    <!--    <script src="/js/sweetalert.min.js"></script>-->
    <!--    <script src="/js/jquery.min.js"></script>-->
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>
</head>
<body>
<div th:insert="navigation :: nav"></div>
<div class="container-fluid main">
    <div class="row">
        <!--左边主要内容-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <!--正文-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--题目-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4 class="question-title"><span th:text="${question.title}"></span></h4>
                    <span class="text-desc">
                    作者：<span th:text="${question.user.name}"></span> |
                    发布时间：<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span> |
                    阅读数： <span th:text="${question.viewCount}"></span>
                    </span>
                </div>

                <!--内容-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"-->
                <!--                     th:text="${question.description}">-->
                <!--                </div>-->

                <div class="col-lg-12 col-md-12 col-xs-12 image-light" id="descriptionP"
                     th:text="${question.description}">
                </div>
                <script type="text/javascript">
                    var obj = document.getElementById("descriptionP");
                    //alert(obj.innerText);//这样就自动解析了
                    obj.innerHTML = obj.innerText;//这样重新设置html代码为解析后的格式
                </script>
                <!--收藏和分享-->
                <div class="pull-right">
                    <button class="btn btn-warning" th:data-id="${question.id}" onclick="likeQuestion(this)">
                        <span class="glyphicon glyphicon-heart-empty" th:id="${'collect-question-' + question.id}">收藏</span>
                        <span th:id="${'collect-count-' + question.id}" th:text="${question.likeCount}"
                              class="badge" style="margin-left: -5px"></span>
                    </button>
                    <div class="btn btn-success bshare-custom icon-medium copyshare" style="height: 35px">
                        <span class="glyphicon glyphicon-share">分享到</span>
                        <a title="分享到QQ空间" class="bshare-qzone"></a>
                        <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
                        <a title="分享到微信" class="bshare-weixin"></a>
                        <a title="分享到QQ好友" class="bshare-qqim"></a>
                        <a title="分享到有道笔记" class="bshare-youdaonote"></a>
                    </div>
                </div>
                <script>
                    var con = '我在白起社区找到一篇好文章《'+document.title+'》，快来戳后面的链接来围观吧！---'+this.location.href;
                    var clipboard = new ClipboardJS('.copyshare', {
                        text: function() {
                            swal("复制成功!", "赶快去分享文章吧~", "success");
                            return ''+con;
                        }
                    });

                    clipboard.on('success', function(e) {
                        console.log(e);
                    });

                    clipboard.on('error', function(e) {
                        console.log(e);
                    });
                </script>
                <script type="text/javascript" charset="utf-8"
                        src="http://static.bshare.cn/b/button.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
                <a class="bshareDiv" onclick="javascript:return false;"></a>
                <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
                <!--标签-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="label label-info question-tag" th:each="tag : ${question.tag.split(',')}">
                        <span class="glyphicon glyphicon-tags"></span>
                        <span class="label label-info" th:text="${tag}"></span>
                    </span>
                </div>

                <!--编辑-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
                       th:if="${session.user!=null&&session.user.id==question.creator}">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        编辑
                    </a>
                    <a class="community-menu" th:href="@{'/publish/'+${question.id}}"
                       th:if="${session.user!=null&&session.user.id == 1}">
                        <img src="/img/jiajing.png" alt="加精">加精
                    </a>
                    <a class="community-menu" th:href="@{'/publish/'+${question.id}}"
                       th:if="${session.user!=null&&session.user.id == 1}">
                        <img src="/img/zhiding.png" alt="置顶">置顶
                    </a>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                    th:if="${session.user!=null&&session.user.id==question.creator}">
            </div>

            <!--回复内容-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--回复列表-->
                <h4>
                    <span th:text="${question.commentCount}"></span>个回复
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment : ${comments}">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded"
                                     th:src="${comment.user.avatarUrl}" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h6 class="media-heading comment-heading">
                                <span th:text="${comment.user.name}"></span>
                            </h6>
                            <div th:text="${comment.content} "></div>
                            <div class="menu">
                                <!--点赞-->
                                <span th:id="${'thumb-icon-'+comment.id}"
                                      th:class="${comment.likeCount != 0}? 'active' : ''">
                                    <span th:data-id="${comment.id}" onclick="likeComment(this)"
                                          class="glyphicon glyphicon-thumbs-up icon" aria-hidden="true"></span>
                                    <span th:id="${'thumb-count-'+comment.id}" th:text="${comment.likeCount}"
                                    ></span>
                                </span>
                                <!--二级评论-->
                                <span th:data-id="${comment.id}" onclick="collapseComment(this)">
                                    <span class="glyphicon glyphicon-comment icon" aria-hidden="true"></span>
                                    <span th:text="${comment.commentCount}" class="count"></span>
                                </span>
                                <span class="pull-right"
                                      th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd')}"></span>
                            </div>
                            <!--二次评论-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
                                 th:id="${'comment-'+comment.id}">
                                <!--二级评论输入框-->
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input type="text" class="form-control" placeholder="评论一下····"
                                           th:id="${'input-'+comment.id}">
                                    <button type="button" class="btn btn-success pull-right" onclick="subComment(this)"
                                            th:data-id="${comment.id}">
                                        评论
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--回复输入框-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="content_section">
                    <!--登录用户头像名字-->
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded avatar"
                                     th:src="${session.user != null ? session.user.avatarUrl:'/img/default-avatar.png'}"
                                     alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h6 class="media-heading community-heading">
                                <span th:text="${session.user != null ? session.user.name:'匿名用户'}"></span>
                            </h6>
                        </div>
                    </div>
                    <input type="hidden" id="question_id" th:value="${question.id}">
                    <textarea class="form-control comment-content" rows="6" id="question_content"></textarea>
                    <button type="button" class="btn btn-success btn-content" onclick="post()">回復</button>
                </div>
            </div>
        </div>
        <!--右边内容-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>发起人</h4>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded avatar"
                                 th:src="${question.user.avatarUrl}" alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading community-heading">
                            <span th:text="${question.user.name}"></span>
                        </h6>
                    </div>
                </div>
            </div>
            <!--图片-->
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="photo-name">图片</h4>
                <img class="photo img-thumbnail" src="/img/si.jpg">
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <!--相关问题-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>相关问题</h4>
                <ul class="question-related">
                    <li th:each="related : ${relatedQuestions}">
                        <span class="glyphicon glyphicon-screenshot">
                            <a th:href="@{'/question/'+ ${related.id}}"
                               th:text="${related.title}"></a>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div th:insert="footer :: foot"></div>
</div>

</body>
</html>